<div class="page-container">
    <h1>人脸检测</h1>
    
    <!-- API说明 -->
    <div class="api-docs">
        <h3>API接口说明</h3>
        <div class="api-item">
            <h4>1. 获取人脸框坐标</h4>
            <p>接口地址：/faceapi/v1/detectBox</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/detectBox 
-H "Authorization: your_token_here" 
-F "imgFile=@image.jpg"</pre>
            
            
            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th style="width: 20%">名称</th>
                    <th style="width: 20%">类型</th>
                    <th style="width: 10%">必填</th>
                    <th style="width: 50%">说明</th>
                </tr>
                <tr>
                    <td>imgFile</td>
                    <td>file</td>
                    <td>是</td>
                    <td>图片文件，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th style="width: 25%">名称</th>
                    <th style="width: 25%">类型</th>
                    <th style="width: 50%">说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.boxes</td>
                    <td>array</td>
                    <td>人脸框坐标列表，每个元素为[top, right, bottom, left]</td>
                </tr>
                <tr>
                    <td>data.count</td>
                    <td>integer</td>
                    <td>检测到的人脸数量</td>
                </tr>
            </table>
            

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "检测完成",
    "data": {
        "boxes": [
            [50, 200, 150, 100],  // [top, right, bottom, left]
            [120, 300, 220, 200]
        ],
        "count": 2
    }
}</pre>
        </div>
        <div class="api-item">
            <h4>2. 提取人脸图片</h4>
            <p>接口地址：/faceapi/v1/detectFace</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/detectFace 
-H "Authorization: your_token_here" 
-F "imgFile=@image.jpg"</pre>
            
            
            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th style="width: 20%">名称</th>
                    <th style="width: 20%">类型</th>
                    <th style="width: 10%">必填</th>
                    <th style="width: 50%">说明</th>
                </tr>
                <tr>
                    <td>imgFile</td>
                    <td>file</td>
                    <td>是</td>
                    <td>图片文件，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th style="width: 25%">名称</th>
                    <th style="width: 25%">类型</th>
                    <th style="width: 50%">说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.faces</td>
                    <td>array</td>
                    <td>base64编码的人脸图片列表</td>
                </tr>
                <tr>
                    <td>data.count</td>
                    <td>integer</td>
                    <td>检测到的人脸数量</td>
                </tr>
            </table>

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "提取完成",
    "data": {
        "faces": [
            "base64_encoded_image_1",
            "base64_encoded_image_2"
        ],
        "count": 2
    }
}</pre>
        </div>
        <div class="api-item">
            <h4>3. 绘制人脸框</h4>
            <p>接口地址：/faceapi/v1/detectDrawBox</p>
            <p>返回格式：JSON</p>
            <p>请求方式：POST</p>
            <p>请求示例：</p>
            <pre>
curl -X POST /faceapi/v1/detectDrawBox 
-H "Authorization: your_token_here" 
-F "imgFile=@image.jpg"</pre>
            
            
            <p>请求参数说明：</p>
            <table class="api-table">
                <tr>
                    <th style="width: 20%">名称</th>
                    <th style="width: 20%">类型</th>
                    <th style="width: 10%">必填</th>
                    <th style="width: 50%">说明</th>
                </tr>
                <tr>
                    <td>imgFile</td>
                    <td>file</td>
                    <td>是</td>
                    <td>图片文件，支持jpg/png格式</td>
                </tr>
                <tr>
                    <td>Authorization</td>
                    <td>string</td>
                    <td>是</td>
                    <td>登录获取的token，需要在请求头中传递</td>
                </tr>
            </table>

            <p>返回参数说明：</p>
            <table class="api-table">
                <tr>
                    <th style="width: 25%">名称</th>
                    <th style="width: 25%">类型</th>
                    <th style="width: 50%">说明</th>
                </tr>
                <tr>
                    <td>success</td>
                    <td>boolean</td>
                    <td>请求是否成功</td>
                </tr>
                <tr>
                    <td>code</td>
                    <td>integer</td>
                    <td>状态码，200表示成功</td>
                </tr>
                <tr>
                    <td>msg</td>
                    <td>string</td>
                    <td>状态描述</td>
                </tr>
                <tr>
                    <td>data.image</td>
                    <td>string</td>
                    <td>base64编码的处理后图片</td>
                </tr>
                <tr>
                    <td>data.count</td>
                    <td>integer</td>
                    <td>检测到的人脸数量</td>
                </tr>
            </table>
            

            <p>JSON返回示例：</p>
            <pre>
{
    "success": true,
    "code": 200,
    "msg": "绘制完成",
    "data": {
        "image": "base64_encoded_image",
        "count": 2
    }
}</pre>
        </div>
    </div>

    <div class="function-group">
        <div class="upload-area" id="detectUpload">
            <input type="file" id="detectFile" accept="image/*" style="display: none;">
            <div>点击或拖拽图片到此处</div>
            <img id="detectPreview" class="preview-image" style="display: none;">
        </div>
        <div class="button-group">
            <div class="test-button-group">
                <button onclick="showTestImageSelect('detect')" class="test-button">
                    <i class="fas fa-vial"></i> 加载测试图片
                </button>
                <div id="detectTestSelect" class="test-select-dropdown">
                    <!-- 选项将通过JavaScript动态加载 -->
                </div>
            </div>
            <button onclick="detectFace('detectBox')">检测人脸框坐标</button>
            <button onclick="detectFace('detectFace')">提取人脸图片</button>
            <button onclick="detectFace('detectDrawBox')">绘制人脸框</button>
        </div>
        <div class="loading" id="detectLoading" style="display: none;">处理中...</div>
        <div class="result-area" id="detectResult"></div>
    </div>
</div> 